<template>
  <div class="detail-container">
    <el-card shadow="never" style="margin-top: 15px;" class="detail-form">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前排货状态：{{form.planState | fifState}}</span>
      </div>
      <el-form size="mini" label-width="150px" style="margin-top:20px" ref="form"  :model="form">
        <div style="margin: 40px 0 20px 0">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">基本信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售合同：" style="margin-bottom:0px;">
              {{form.orderSn}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称：" style="margin-bottom:0px;">
              {{form.customerName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款状态：" style="margin-bottom:0px;">
              {{form.payState | fiferPayState}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务审核状态：" style="margin-bottom:0px;">
              {{form.financeState | fiferfinanceState}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收货地址：" style="margin-bottom:0px;">
              {{form.addressInfo}} <span style="padding-left:15px">{{ form.receiverName }}/{{ form.receiverMobile }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品信息：" style="margin-bottom:0px;">
              {{form.goodsName}} / {{form.goodsSn}} / {{form.goodsNum}}吨
            </el-form-item>
          </el-col>
        </el-row>

        <div style="margin: 40px 0 20px 0;clear: both">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">排货信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品信息：" style="margin-bottom:0px;">
              {{form.goodsName}} / {{form.goodsSn}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品包装：" style="margin-bottom:0px;">
              {{form.goodsWeight ? form.goodsWeight : '--'}} kg  <span>{{form.isHasTray == 1 ? '含托盘' : form.isHasTray == 0 ?'不含托盘':'--'}}</span> <el-button type="text" style="margin-left:10px" @click="showPop4">修改</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
              <el-form-item label="提货数量：" style="margin-bottom:0px;">
                {{form.takeNum}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="提货时间：" style="margin-bottom:0px;">
              {{form.takeTime}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="提货仓库：" style="margin-bottom:0px;">
              {{form.warehouseName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提货地址：" style="margin-bottom:0px;">
              {{form.takeAddress}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="创建时间：" style="margin-bottom:0px;">
              {{form.createTime}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人：" style="margin-bottom:0px;">
              {{form.contactName}} / {{form.contactMobile}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="24">
            <el-form-item label="注意事项：" style="margin-bottom:0px;">
              {{form.takeRemark}}
            </el-form-item>
          </el-col>
        </el-row>

        <div style="margin: 40px 0 20px 0;clear: both">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">司机信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="司机姓名：" style="margin-bottom:0px;">
              {{form.driverName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="司机手机号：" style="margin-bottom:0px;">
              {{form.driverMobile}} <span style="padding-left:20px;"><el-checkbox v-model="checked">显示手机号</el-checkbox></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号：" style="margin-bottom:0px;">
              {{form.driverTruckNo}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号：" style="margin-bottom:0px;">
              {{form.driverIdNumber}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运满满订单号：" style="margin-bottom:0px;">
              {{form.ymmOrderId}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调度员：" style="margin-bottom:0px;">
              {{form.ymmOrderUserName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
              <el-col :span="24">
                <el-form-item label="备注：" style="margin-bottom:0px;">
                  {{form.remark}}
                </el-form-item>
              </el-col>
        </el-row>

        <div style="margin: 40px 0 20px 0;clear: both" v-if="form.takeOrderInfo && form.takeOrderInfo.purchaseSn && form.takeOrderInfo.purchaseSn != ''">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">提货信息</span>
        </div>
        <div  v-if="form.takeOrderInfo && form.takeOrderInfo.purchaseSn && form.takeOrderInfo.purchaseSn != ''">
          <el-row >
            <el-col :span="12">
              <el-form-item label="采购合同：" style="margin-bottom:0px;">
                {{form.takeOrderInfo.purchaseSn}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商：" style="margin-bottom:0px;">
                {{form.takeOrderInfo.supplierName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="12">
              <el-form-item label="合同公司：" style="margin-bottom:0px;">
                {{form.takeOrderInfo.fromCompany}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提货时间：" style="margin-bottom:0px;">
                {{form.takeOrderInfo.takeTime}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="24">
              <el-form-item label="提货备注：" style="margin-bottom:0px;">
                {{form.takeOrderInfo.takeRemark}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-table
            ref="orderItemTable"
            :data="form.takeOrderInfo.takeGoodsList"
            style="margin-top: 20px;box-sizing: border-box;" border>
            <el-table-column label="商品名称" width="200">
              <template slot-scope="scope">
                {{scope.row.goodsName}}/{{scope.row.goodsSn}}
              </template>
            </el-table-column>
            <el-table-column label="包装" width="180"  align="center">
              <template slot-scope="scope">
                {{scope.row.goodsWeight}} <span>kg/包</span>
              </template>
            </el-table-column>
            <el-table-column label="采购数量（吨）" width="130" align="center">
              <template slot-scope="scope">
                {{scope.row.purchaseNum}}
              </template>
            </el-table-column>
            <el-table-column label="提货数量（吨）" width="130" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.takeNum}}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否含托" width="130" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.isHasTray ? '是' : '否'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="300" align="center">
              <template slot-scope="scope">
                {{scope.row.tgRemark}}
              </template>
            </el-table-column>
          </el-table>
        </div>

      </el-form>
    </el-card>

    <div style="margin-top:40px;text-align: center">

      <!--公司发货  物流确认发货 打印提货单  到详情-->
      <div v-if="form.planSendType == '运联发货' && form.planState != 5" style="display: inline-block">
        <el-button v-if="form.planState == 0" style="margin-left:0" type="primary" size="small" @click="showSendGoods">物流发货</el-button>
        <el-button  v-if="form.planState == 0 || form.planState == 10" style="margin-left:0" type="primary" size="small" @click="showDialogVisible('物流确认发货')">物流确认发货</el-button>
<!--        <el-button  style="margin-left:0" type="primary" size="small" @click="showDialogVisible('物流确认发货')">物流确认发货</el-button>-->
        <el-button v-if="form.takeOrderInfo && form.takeOrderInfo.purchaseSn && form.takeOrderInfo.purchaseSn != ''" style="margin-left:0" type="primary" size="small" @click="showDetail2">修改提货信息</el-button>
<!--        <el-button v-if="form.planState == 30 || form.planState == 40" style="margin-left:0" type="primary" size="small" @click="showDialogVisible('修改司机信息')">修改司机信息</el-button>-->
        <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible('修改司机信息')">修改司机信息</el-button>
        <el-button v-if="form.planState == 30||form.planState == 40" style="margin-left:0" type="primary" size="small" @click="showPrint">打印提货单</el-button>
        <el-button v-if="form.isNeedCheck == 1 && form.planState == 30" style="margin-left:0" type="primary" size="mini" @click="showDialogVisible5">确认出库</el-button>
      </div>

      <!--采购发货 打印提货单  到详情-->
      <div v-if="form.planSendType == '工厂发货'&&form.planState != 5" style="display: inline-block">
        <el-button v-if="form.takeOrderInfo && form.takeOrderInfo.purchaseSn && form.takeOrderInfo.purchaseSn != ''" style="margin-left:0" type="primary" size="small" @click="showDetail2">修改提货信息</el-button>
        <el-button v-if="form.planState == 20" style="margin-left:0" type="primary" size="small" @click="showDialogVisible('填写司机')">填写司机</el-button>
        <el-button v-if="(form.planState == 30||form.planState == 40)&&form.takeOrderInfo.tOrderId" style="margin-left:0" type="primary" size="small" @click="showPrint">打印提货单</el-button>
        <el-button v-if="form.isNeedCheck == 1 && form.planState == 30" style="margin-left:0" type="primary" size="mini" @click="showDialogVisible5">确认出库</el-button>
      </div>

      <!--客户自提 填写司机 打印提货单  到详情-->
      <div v-if="form.planSendType == '自提'&&form.planState != 5" style="display: inline-block">
        <el-button v-if="form.takeOrderInfo && form.takeOrderInfo.purchaseSn && form.takeOrderInfo.purchaseSn != ''" style="margin-left:0" type="primary" size="small" @click="showDetail2">修改提货信息</el-button>
        <el-button v-if="form.planState == 20" style="margin-left:0" type="primary" size="small" @click="showDialogVisible('填写司机')">填写司机</el-button>
        <el-button v-if="form.planState == 20 || form.planState == 30 ||form.planState == 40" style="margin-left:0" type="primary" size="small" @click="showPrint">打印提货单</el-button>
        <el-button v-if="form.planState == 30 || form.planState == 40" style="margin-left:0" type="primary" size="small" @click="showDialogVisible('修改司机信息')">修改司机信息</el-button>
        <el-button v-if="form.isNeedCheck == 1 && form.planState == 30" style="margin-left:0" type="primary" size="mini" @click="showDialogVisible5">确认出库</el-button>
      </div>

      <!---直接通过接口返回判断是否可取消与回退--->
      <el-button v-if="form.isCanCancel" style="margin-left:0" type="primary" size="small" @click="showCancelForm">取消排货</el-button>
      <el-button v-if="form.isCanBack" style="margin-left:0" type="primary" size="small" @click="showbackForm">回退</el-button>

    </div>

    <div style="margin-top: 20px;clear: both">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">操作记录</span>
    </div>
    <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in form.logList"
          :key="index">
          <span><span style="padding-right:10px;">{{activity.createTime}}</span>{{activity.userName}}：{{activity.logContent}} </span>
        </el-timeline-item>
      </el-timeline>
      <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="form.logList && form.logList.length == 0">- 暂无数据 -</div>
    </div>


    <!--打印弹窗-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="closePrint"
      :visible.sync="dialogVisible"
      width="900px">
      <div style="padding:40px 30px 100px 30px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
        <div style="height:100%;background: #fff" id="print-div" v-if="(form.planSendType == '运联发货'&& form.takeOrderInfo.tOrderId) || (form.planSendType == '自提' && form.takeOrderInfo.tOrderId)">
          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">提货单</div>
          <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;margin-top:20px">
            <div class="good-table">
              <table cellspacing="0" cellpadding="0" border="0" width="100%" class="tihuotable" style="">
                <tr>
                  <td align="center" class="th" style="width:200px"><div class="td-div" >提货单位</div></td>
                  <td align="center" colspan="4"><div class="td-div" style="font-weight: bold">{{formPrint.supplierName}}</div></td>
                </tr>
                <tr>
                  <Td colspan="5">我司将于 {{formPrint.tOrderTime | formatTime }} 派车辆前往贵司指定仓库提货，请予协助办理。具体信息如下：</Td>
                </tr>
                <tr>
                  <td align="center" class="th"><div class="td-div">司机姓名</div></td>
                  <td align="center" colspan="2">
                    <div class="td-div">
                      {{formPrint.driverName}}<br/>{{formPrint.driverIdNumber}}
                    </div>
                  </td>
                  <td align="center" class="th" style="width:120px"><div class="td-div" >内部合同</div></td>
                  <td align="center"><div class="td-div">{{formPrint.purchaseOrderSn}}</div></td>
                </tr>
                <tr>
                  <td align="center" class="th"><div class="td-div">提货车牌</div></td>
                  <td align="center" colspan="2">
                    <div class="td-div">{{formPrint.driverCardNo}}</div>
                  </td>
                  <td align="center" class="th" style="width:120px"><div class="td-div" >司机手机</div></td>
                  <td align="center" colspan="2"><div class="td-div"><span v-if="checked">{{formPrint.driverMobile}}</span></div></td>
                </tr>
                <tr>
                    <td colspan="5" style="height:8px"></td>
                </tr>
                <tr>
                  <td align="center" class="th" ><div class="td-div">商品名称</div></td>
                  <td align="center" class="th" style="width:100px;"><div class="td-div">包装</div></td>
                  <td align="center"  class="th" style="width:100px;"><div class="td-div">提货数量（吨）</div></td>
                  <td align="center" class="th" style="width:120px"><div class="td-div" >是否含托盘</div></td>
                  <td align="center" class="th"><div class="td-div">备注</div></td>
                </tr>
                <tr v-for="item in formPrint.tOrdGoodsList">
                  <td align="center"><div class="td-con">{{item.goodsName}} / {{item.goodsSn}}</div></td>
                  <td align="center" style="white-space:nowrap;"><div class="td-con" >{{item.goodsWeight}} kg/包</div></td>
                  <td align="center" style="white-space:nowrap;"><div class="td-con">{{item.takeNum}}</div></td>
                  <td align="center"><div  class="td-con">{{item.isHasTray ? '是' : '否'}}</div></td>
                  <td align="center" ><div class="td-con" style="max-width:150px">{{item.tgRemark}}</div></td>
                </tr>
                <tr>
                  <td align="center" class="th"><div class="td-div">备注</div></td>
                  <td align="center" colspan="4">
                    <div class="td-div">
                      <div>{{formPrint.tRemark}}</div>
                      <div v-for="item in formPrint.changeCarNoList">{{item.msg}}</div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <div style="margin-top:80px;text-align: right;">{{formPrint.fromCompany}}</div>
            <div style="text-align: right">{{newTime}}</div>
            <img :src="formPrint.imageUrl" style="float:right;margin-top:-100px;width: 156px;"/>
          </div>
          <!--        <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;margin-top:20px" >-->
          <!--          <div>{{formPrint.supplierName}}：</div>-->
          <!--          <div style="padding-left:28px;margin-top:10px">我司将于 {{formPrint.tOrderTime | formatTime }} 派车辆前往贵司指定仓库提货，请予协助办理。具体信息如下：</div>-->
          <!--          <div style="overflow: hidden">-->
          <!--            <div style="padding-left:28px;margin-top:20px;">-->
          <!--              <span style="display: inline-block;width:80px;">内部合同:</span>-->
          <!--              <span style="display: inline-block;text-decoration: underline">{{formPrint.purchaseOrderSn}}</span>-->
          <!--            </div>-->
          <!--            <div style="padding-left:28px;">-->
          <!--              <span style="display: inline-block;width:80px;">司机姓名:</span>-->
          <!--              <span style="display: inline-block;text-decoration: underline">{{formPrint.driverName}} : {{formPrint.driverIdNumber}}</span>-->
          <!--            </div>-->

          <!--            <div style="padding-left:28px;" v-if="checked">-->
          <!--              <span style="display: inline-block;width:80px;">司机手机:</span>-->
          <!--              <span style="display: inline-block;text-decoration: underline">{{formPrint.driverMobile}}</span>-->
          <!--            </div>-->

          <!--            <div style="padding-left:28px;">-->
          <!--              <span style="display: inline-block;width:80px;">提货车牌:</span>-->
          <!--              <span style="display: inline-block;text-decoration: underline">{{formPrint.driverCardNo}}</span>-->
          <!--            </div>-->
          <!--            <div class="good-table" style="margin-top:20px;">-->
          <!--              <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-left:1px solid #000;border-bottom:1px solid #000">-->
          <!--                <tr>-->
          <!--                  <th align="center" style="border-top:1px solid #000;background: #f2f2f2">商品名称</th>-->
          <!--                  <th align="center" style="border-top:1px solid #000;background: #f2f2f2">包装</th>-->
          <!--                  <th align="center" style="border-top:1px solid #000;background: #f2f2f2">提货数量（吨）</th>-->
          <!--                  <th align="center" style="border-top:1px solid #000;white-space:nowrap;background: #f2f2f2">是否含托盘</th>-->
          <!--                  <th align="center" style="border-right: 1px solid #000;border-top:1px solid #000;background: #f2f2f2">备注</th>-->
          <!--                </tr>-->
          <!--                <tr v-for="item in formPrint.tOrdGoodsList">-->
          <!--                  <td align="center"><div class="td-con">{{item.goodsName}} / {{item.goodsSn}}</div></td>-->
          <!--                  <td align="center" style="white-space:nowrap;"><div class="td-con" >{{item.goodsWeight}} kg/包</div></td>-->
          <!--                  <td align="center" style="white-space:nowrap;"><div class="td-con">{{item.takeNum}}</div></td>-->
          <!--                  <td align="center"><div  class="td-con">{{item.isHasTray ? '是' : '否'}}</div></td>-->
          <!--                  <td align="center"  style="border-right: 1px solid #000"><div class="td-con" style="max-width:150px">{{item.tgRemark}}</div></td>-->
          <!--                </tr>-->
          <!--              </table>-->
          <!--            </div>-->
          <!--            <div style="margin-top:20px;">备注：<div>{{formPrint.tRemark}}</div><div v-for="item in formPrint.changeCarNoList">{{item.msg}}</div></div>-->
          <!--            <div style="margin-top:40px;text-align: right">{{formPrint.fromCompany}}</div>-->
          <!--            <div style="text-align: right">{{newTime}}</div>-->
          <!--            <img :src="formPrint.imageUrl" style="float:right;margin-top:-100px;width: 156px;"/>-->
          <!--          </div>-->
          <!--        </div>-->
        </div>
        <div style="height:100%;background: #fff" id="print-div" v-else-if="form.planSendType =='工厂发货'">
          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">委托书</div>
          <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;width:80%;margin:20px auto" v-if="formPrint.tOrdGoodsList && formPrint.tOrdGoodsList[0]">
            因我公司业务需要，特此委托：{{form.takeOrderInfo.supplierName}},<br/>
            产品名称： {{formPrint.tOrdGoodsList[0].goodsName}} / {{formPrint.tOrdGoodsList[0].goodsSn}}，数量：{{formPrint.tOrdGoodsList[0].takeNum}}吨<br/>
            包装：{{formPrint.tOrdGoodsList[0].goodsWeight}}KG/包，货物将于{{form.takeOrderInfo.takeTime | formatTime}}送往{{form.addressInfo}}，{{ form.receiverName }}，{{ form.receiverMobile }}
            <div style="text-align: right;margin-top:40px">{{newTime}}</div>
            <img :src="formPrint.imageUrl" style="float:right;margin-top:-100px;width: 156px;"/>
          </div>
        </div>
        <div style="height:100%;background: #fff" id="print-div" v-else-if="(form.planSendType == '自提' || form.planSendType == '运联发货') && !form.takeOrderInfo.tOrderId">
          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">提货通知单</div>
          <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;margin:20px auto;width:80%;padding-bottom:50px">
            <div>{{form.warehouseName}}:</div>
            <div style="margin-top:10px;text-indent:25px">我司将于{{form.takeTime | formatTime}}派车辆至贵司仓库提货，请予协助。具体信息如下：</div>
            <div style="padding-left:25px;font-weight: bold;">
              物料名称：{{form.goodsName}}/{{form.goodsSn}}<br/>
              包装规格及数量：{{form.goodsWeight ? form.goodsWeight : '--'}}KG/包，共{{form.takeNum}}吨<br/>
              车号：{{form.driverTruckNo}}
              <div style="font-weight: 400">特此说明！</div>
            </div>
            <div style="text-align: right;margin-top:40px;position: relative;padding-right: 50px;">
              <div style="position: absolute;top: -67px;right: 98px;z-index: 0;">
                <img src="https://pic.moresu.com/Fs2mM9ajQEv0WHrmnhveUa3eu52O" style="width:156px;"/>
              </div>
              <div style="padding-right:109px;position: relative;z-index: 1">提货公司章：</div>
              <div style="position: relative;z-index: 1"><span style="letter-spacing: 44px;">日</span>期：{{newTime}}</div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
      </div>
    </el-dialog>

    <!--物流发货-->
    <sendGoods ref="sendGoods" @handleConfirm="getOrderInfo"></sendGoods>

    <!--修改司机-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose3"
      :title="title3"
      :visible.sync="dialogVisible3"
      width="400px">
      <el-form :model="deliverForm" size="mini" label-width="140px"  ref="deliverForm" :rules="rules3">
        <el-form-item label="司机姓名："  prop="driverName"><el-input v-model="deliverForm.driverName"></el-input></el-form-item>
        <el-form-item label="司机手机号：" prop="driverMobile"><el-input v-model="deliverForm.driverMobile"></el-input></el-form-item>
        <el-form-item label="车牌号："  prop="driverTruckNo"><el-input v-model="deliverForm.driverTruckNo"></el-input></el-form-item>
        <el-form-item label="身份证号：" ><el-input v-model="deliverForm.driverIdNumber"></el-input></el-form-item>
        <el-form-item label="运满满订单号：" >
          <el-input v-model="deliverForm.ymmOrderId"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
           <el-input v-model="deliverForm.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="调度员：">
          <el-select v-model="deliverForm.ymmOrderUserId">
              <el-option :value="item.userId" :label="item.realName" v-for="(item,index) in changkuList" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
<!--      <div style="color:red;padding:0 16px;font-size:12px">注：选择承兑支付时，请确认已有承兑票据</div>-->
      <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose3">取 消</el-button>
              <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
          </span>
    </el-dialog>

    <!--修改提货信息-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose2"
      title="修改提货信息"
      :visible.sync="dialogVisible2"
      width="900px">
      <el-form :model="takeForm" size="mini" label-width="100px"  ref="takeForm" :rules="rules2">
        <el-form-item label="采购合同：">{{takeForm.purchaseSn}}</el-form-item>
        <el-form-item label="合同公司：" prop="fromCompany">
          <el-select v-model="takeForm.fromCompany">
              <el-option value="常州普利成" label="常州普利成" key="常州普利成"></el-option>
              <el-option value="塑盟科技集团有限公司" label="塑盟科技集团有限公司" key="塑盟科技集团有限公司"></el-option>
              <el-option value="上海泛塑" label="上海泛塑" key="上海泛塑"></el-option>
            <el-option value="华灯车尚" label="华灯车尚" key="华灯车尚"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提货时间：" prop="takeTime">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="takeForm.takeTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="提货备注：">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" style="width:400px"  v-model.trim="takeForm.takeRemark"></el-input>
        </el-form-item>
        <div>商品信息</div>
        <el-table
          ref="orderItemTable"
          :data="takeForm.takeGoodsList"
          style="margin-top: 20px;box-sizing: border-box;width:1071px" border>
          <el-table-column label="商品名称" width="200">
            <template slot-scope="scope">
              <el-form-item label-width="0">
                {{scope.row.goodsSn}}
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="包装" width="180"  align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`takeGoodsList.${scope.$index}.goodsWeight`" :rules="rules2.goodsWeight">
                <el-input style="width:100px" v-model="scope.row.goodsWeight"></el-input><span style="padding-left:5px">kg/包</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="采购数量（吨）" width="130" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0">
                {{scope.row.purchaseNum}}
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="提货数量（吨）" width="130" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`takeGoodsList.${scope.$index}.takeNum`" :rules="rules2.takeNum">
                <el-input style="width:100px" v-model="scope.row.takeNum" ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="是否含托" width="130" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0">
                <el-checkbox v-model="scope.row.isHasTray">是</el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="300" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0">
                <el-input  v-model="scope.row.tgRemark" ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改包装-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose4"
      title="修改包装"
      :visible.sync="dialogVisible4"
      width="300px">
      <el-form :model="weightForm" size="mini" label-width="100px"  ref="weightForm" :rules="rules4">
        <el-form-item label="商品包装：" prop="goodsWeight">
          <el-input style="width:100px" v-model="weightForm.goodsWeight"></el-input><span style="padding-left:5px">kg</span>
        </el-form-item>
        <el-form-item label="是否含托：">
          <el-checkbox v-model="weightForm.isHasTray">是</el-checkbox>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose4">取 消</el-button>
          <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
      </span>
    </el-dialog>

    <!--确认出库-->
    <el-dialog
      title="确认出库"
      :visible.sync="dialogVisible5"
      width="800px">
      <div style="max-height:500px;overflow: auto">
        <el-table ref="multipleTable"
                  row-key="dgId"
                  :data="sendList"
                  style="width: 95%;font-size: 12px;margin:0 auto"
                  @selection-change="handleSelectionChange5"
                  v-loading="listLoading5"
                  border>
          <el-table-column type="selection" :reserve-selection="true" width="60" align="center" :selectable="checkSelectable"></el-table-column>
          <el-table-column label="发货单号" align="center" width="150">
            <template slot-scope="scope">
              {{scope.row.deliverSn}}
            </template>
          </el-table-column>
          <el-table-column label="销售单号" align="center" width="150">
            <template slot-scope="scope">
              {{scope.row.orderSn}}
            </template>
          </el-table-column>
          <el-table-column label="商品信息" >
            <template slot-scope="scope">
              {{scope.row.goodsName}}
            </template>
          </el-table-column>
          <el-table-column label="发货数量" align="center">
            <template slot-scope="scope">
              {{scope.row.shipNum}}
            </template>
          </el-table-column>
          <el-table-column label="未核减数量" align="center">
            <template slot-scope="scope">
              {{scope.row.unPlanNum}}
            </template>
          </el-table-column>
          <el-table-column label="送货类型" align="center">
            <template slot-scope="scope">
              {{scope.row.sendType}}
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 95%;font-size: 12px;margin:20px auto 0 auto">
          <div>需核减数量：<span style="font-size:14px;font-weight: bold">{{PlanNum}}</span> 吨 <span style="padding-left:20px">已选核减数量：<span style="color:#409EFF;font-weight: bold;font-size:14px">{{chooseUnPlanNum}}</span> 吨</span></div>
          <div style="color:red;font-size:12px;margin-top:10px">说明：如果已选核减数量大于需核减数量，将按照选择的发货单顺序逐一核减，多出的发货数量将不会被核减</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose5">取 消</el-button>
            <el-button type="primary" @click="handleConfirm5">确 定</el-button>
      </span>
    </el-dialog>


    <!--取消排货-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose6"
      title="取消排货"
      :visible.sync="dialogVisible6"
      width="500px">
      <el-form :model="cancelForm" size="mini" label-width="100px"  ref="cancelForm" :rules="rules6">
        <el-form-item label="取消类型：" prop="cancelType">
            <el-radio-group v-model="cancelForm.cancelType">
                <el-radio label="物流"></el-radio>
                <el-radio label="销售"></el-radio>
                <el-radio label="采购"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="运费损失：" >
            <el-input-number v-model="cancelForm.lossFreight"></el-input-number>
        </el-form-item>
        <el-form-item label="取消原因：" prop="cancelRemark">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model.trim="cancelForm.cancelRemark"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose6">取 消</el-button>
          <el-button type="primary" @click="handleConfirm6" :loading="btnLoading6">确 定</el-button>
      </span>
    </el-dialog>

    <!--回退-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose7"
      title="回退"
      :visible.sync="dialogVisible7"
      width="500px">
      <el-form :model="backForm" size="mini" label-width="100px"  ref="backForm" :rules="rules7">
        <el-form-item label="回退原因：" prop="remark">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model.trim="backForm.remark"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose7">取 消</el-button>
          <el-button type="primary" @click="handleConfirm7" :loading="btnLoading7">确 定</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {formatDate} from '@/utils/date';
import store from '@/store'
import {getTakeInfo,addOrderTakeOrder,postTakeOrderOrderProcess,getPrintContentakeOrder,changeTakeInfo,planGoodsOperate,getDeliverGoods} from '@/api/partner'
import "@/utils/jQuery.print"
import sendGoods from '@/views/components/sendGoods';
import {validateCommission} from '@/utils/validate';
import {goodsPlanBack, inputDriverInfo, planGoodsEdit, planGoodsInfo,getUserOption} from "../../api/partner";
import {cancelGoodsPlan} from "../../api/company";
const defaultForm={
  "purchaseOrderId":null,
  "purchaseOrderSn":"",
  "supplierName":"",
  "fromCompany":"",
  "ordGoodsList":[],
  tRemark:'',
  saleOrderId:null,
};
const defaultItme = {
  "goodsKingId":'',
  "goodsName":"",
  "goodsSn":"",
  "purchaseNum":"",
  goodsWeight:'',
  takeNum:'',
  isHasTray:false,
  tgRemark:'',
  options:[],
  loading:false,
};
const defaultDeliverForm={
  "dpgId" : 1, //排货商品记录ID
  "driverName" : "", //司机姓名
  driverMobile:'',//司机手机号
  "driverTruckNo" : "", //车牌号
  driverIdNumber:'',//身份证
  "remark" : "" ,//备注
  ymmOrderId:'',
  ymmOrderUserId:''
};

const defaultTakeForm={
  "fromCompany" : '',
  "purchaseSn" : "",
  supplierName:'',
  tOrderId : "",
  takeGoodsList:[],
  "takeRemark" : "原厂正牌，原料生产日期不超过合同签订日前六个月，外观无破损、潮湿，无大面积污渍，包装袋规格及颜色一致。",
  takeTime:''
};

const defaultCancelForm={
  dpgId:'',
  cancelType : "", //取消类型
  "cancelRemark" : "", //取消原因
  "lossFreight" : 0 ,//损失运费
}

const defaultBackForm={
  dpgId:'',
  "remark" : "", //取消原因
}

export default {
  name: "customerDetail",
  data(){
    const isvalidateCommission = (rule, value, callback) => {
      if (!validateCommission(parseFloat(value))) {
        callback(new Error('非负整数或小数'))
      } else if(value > 99999999){
        callback(new Error('最大值为99999999'))
      }else {
        callback()
      }
    };
    return{
      loading:false,
      tOrderId:this.$route.query.tOrderId,
      orderInfo:{},
      dialogVisible:false,
      btnLoading1:false,


      form: {},

      remark:'',
      formPrint:{},
      checked:false,


      dialogVisible2:false,
      btnLoading2:false,
      takeForm: JSON.parse(JSON.stringify(defaultTakeForm)),
      rules2:{
        fromCompany:[{required: true, trigger: 'change' ,message: '此项必填',}],
        takeTime:[{required: true, trigger: 'change' ,message: '此项必填',}],
        goodsWeight:[{required: true, trigger: 'blur' ,message: '此项必填',}],
        takeNum:[{required: true, trigger: 'blur' ,message: '此项必填',}],
      },

      deliverForm:JSON.parse(JSON.stringify(defaultDeliverForm)),
      dialogVisible3:false,
      rules3:{
        driverName:[{required: true, trigger: 'blur' ,message: '此项必填',}],
        driverMobile:[{required: true, trigger: 'blur' ,message: '此项必填',}],
        driverTruckNo:[{required: true, trigger: 'blur' ,message: '此项必填',}],
      },
      btnLoading3:false,
      title3:'',
      weightForm:{
        goodsWeight:'',
        isHasTray:false
      },
      btnLoading4:false,
      rules4:{
        goodsWeight:[{required: true, trigger: 'blur' ,message: '此项必填',}],
      },
      dialogVisible4:false,

      sendList:[],
      selectList:[],
      listLoading5:false,
      chooseUnPlanNum:0,//已选核减数量
      PlanNum:0,//需核减数量
      dpgId:'',
      dialogVisible5:false,

      btnLoading6:false,
      dialogVisible6:false,
      cancelForm:JSON.parse(JSON.stringify(defaultCancelForm)),
      rules6:{
        cancelType:[{required: true, trigger: 'blur' ,message: '此项必填',}],
        cancelRemark:[{required: true, trigger: 'blur' ,message: '此项必填',}],
      },

      btnLoading7:false,
      dialogVisible7:false,
      backForm:JSON.parse(JSON.stringify(defaultBackForm)),
      rules7:{
        remark:[{required: true, trigger: 'blur' ,message: '此项必填',}],
      },

      changkuList:[]

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    newTime() {
      let date = new Date();
      return formatDate(date, 'yyyy年MM月dd日')
    },
  },
  components : {
    sendGoods:sendGoods,
  },
  created() {
    this.getOrderInfo();
  },
  filters: {
    fiferPayState(val){
      if(val == 0){
        return '--'
      }else if(val == 1){
        return '未结清'
      }else if(val == 2){
        return '已结清'
      }
    },

    fiferfinanceState(val){
      if(val == 0){
        return '未审核'
      }else if(val == 1){
        return '已审核'
      }else if(val == 2){
        return '已关闭'
      }else if(val == 3){
        return '部分审核'
      }
    },

    formatTime(time) {
      if(time){
        let date = new Date(time);
        return formatDate(date, 'yyyy年MM月dd日')
      }
    },
    fifState(val){
      if(val == 0){
        return '待物流发货'
      }else if(val == 10){
        return '发货中'
      }else if(val == 20){
        return '待安排司机'
      }else if(val == 30){
        return '待出库'
      }else if(val == 40){
        return '已出库'
      }else if(val == 5){
        return '已取消'
      }
    },
  },
  methods:{
    //获取仓库员工
    getChangku(){
      getUserOption({departmentId:4,status:1}).then((res)=>{
        this.changkuList = res
      })
    },
    showbackForm(){
      this.dialogVisible7 = true;
    },
    handleClose7(){
      this.dialogVisible7 = false;
    },
    handleConfirm7(){
      this.$refs.backForm.validate((valid) => {
        if (valid) {
          this.btnLoading7 = false;
          let data = JSON.parse(JSON.stringify(this.backForm));
          data.dpgId = this.form.dpgId;
          goodsPlanBack(data).then(response => {
            this.btnLoading7 = false;
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.handleClose7()
            this.getOrderInfo();
          }).catch(() => {
            this.btnLoading7 = false;
          })
        }
      })
    },

    showCancelForm(){
      this.dialogVisible6 = true;
    },
    handleClose6(){
      this.dialogVisible6 = false;
    },
    handleConfirm6(){
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          this.btnLoading6 = false;
          let data = JSON.parse(JSON.stringify(this.cancelForm));
          data.dpgId = this.form.dpgId;
          cancelGoodsPlan(data).then(response => {
            this.btnLoading6 = false;
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.handleClose6()
            this.getOrderInfo();
          }).catch(() => {
            this.btnLoading6 = false;
          })
        }
      })
    },
    //判断是否能选择
    checkSelectable(row,index){
      let flag = true;
      for (let i = 0; i < this.sendList.length; i++) {
        if( parseFloat(row.unPlanNum) == 0){
          flag = false
        }
      }
      return flag
    },
    //显示确认发货弹窗
    showDialogVisible5(){
      this.dialogVisible5 = true;
      this.selectList = [];
      this.chooseUnPlanNum = 0;
      this.PlanNum = this.form.unShipNum;
      this.dpgId = this.form.dpgId;
      this.getChooseList();
    },

    //关闭确认发货弹窗
    handleClose5(){
      this.$refs.multipleTable.clearSelection();
      this.dialogVisible5 = false;
    },

    /**
     *获取选择发货单列表
     **/
    getChooseList() {
      this.listLoading5 = true;
      getDeliverGoods({ogId:this.form.ogId}).then(response => {
        this.listLoading5 = false;
        this.sendList = response;
      });
    },

    //切换选择发货单
    handleSelectionChange5(val){
      this.selectList = JSON.parse(JSON.stringify(val));
      this.countUnPlanNum();
    },

    //计算已选中发货单的未核减数量
    countUnPlanNum(){
      this.chooseUnPlanNum = 0
      this.selectList.forEach((el)=>{
        this.chooseUnPlanNum = this.chooseUnPlanNum + parseFloat(el.unPlanNum)
      });
      this.chooseUnPlanNum = this.chooseUnPlanNum.toFixed(4)
    },

    //提交确认的发货单
    handleConfirm5(){
      if(this.selectList.length > 0){
        let data = {};
        data.dpgId = this.dpgId;
        data.dgIds = [];
        this.selectList.forEach((el)=>{
          data.dgIds.push(el.dgId)
        });
        this.handleClose5();
        planGoodsOperate(data).then(response=>{
          this.$message({
            message: '操作成功',
            type: 'success',
            duration:1000
          });
          this.getOrderInfo()
        });
      }else{
        this.$message({
          message: '请选择要核减的发货单',
          type: 'info',
          duration:1000
        });
      }
    },


    //显示修改包装
    showPop4(){
      this.dialogVisible4 = true;
      this.weightForm.goodsWeight = this.form.goodsWeight;
      this.weightForm.isHasTray = this.form.isHasTray == 1 ? true : false;
    },

    //关闭修改包装
    handleClose4(){
      this.dialogVisible4 = false;
    },

    //提交修改包装
    handleConfirm4(){
      this.$refs.weightForm.validate((valid) => {
        if (valid) {
          this.btnLoading4 = false;
          let data = JSON.parse(JSON.stringify(this.weightForm));
          data.isHasTray = data.isHasTray ? 1 : 0;
          data.dpgId = this.form.dpgId;
          planGoodsEdit(data).then(response => {
            this.btnLoading4 = false;
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.handleClose4()
            this.getOrderInfo();
          }).catch(() => {
            this.btnLoading4 = false;
          })
        }
      })
    },

    //显示司机弹窗
    showDialogVisible(title){
      this.getChangku();
      this.title3 = title;
      this.dialogVisible3 = true;
      this.deliverForm.dpgId = this.$route.query.dpgId;
      this.deliverForm.driverName = this.form.driverName;
      this.deliverForm.driverMobile = this.form.driverMobile;
      this.deliverForm.driverTruckNo = this.form.driverTruckNo;
      this.deliverForm.remark = this.form.remark;
      this.deliverForm.driverIdNumber = this.form.driverIdNumber;
      this.deliverForm.ymmOrderId = this.form.ymmOrderId;
      this.deliverForm.ymmOrderUserId = this.form.ymmOrderUserId ? this.form.ymmOrderUserId : '';
    },
    //关闭司机弹窗
    handleClose3(){
      this.dialogVisible3 = false
    },
    //提交司机信息
    handleConfirm3(){
      this.$refs.deliverForm.validate((valid) => {
        if (valid) {
          this.btnLoading3 = false;
          inputDriverInfo(this.deliverForm).then(response => {
            this.btnLoading3 = false;
            this.handleClose3();
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.getOrderInfo();
          }).catch(() => {
            this.btnLoading3 = false;
          })
        }
      })
    },


    //物流发货
    showSendGoods(){
      this.$refs.sendGoods.showPop(this.form)
    },

    //显示修改提货信息
    showDetail2(){
      this.dialogVisible2 = true;
      this.takeForm = this.form.takeOrderInfo ? JSON.parse(JSON.stringify(this.form.takeOrderInfo)) : JSON.parse(JSON.stringify(this.form.defaultTakeForm));
      this.takeForm.takeRemark = this.takeForm.takeRemark == '' ? '原厂正牌，原料生产日期不超过合同签订日前六个月，外观无破损、潮湿，无大面积污渍，包装袋规格及颜色一致。' : this.takeForm.takeRemark
      this.takeForm.takeGoodsList.forEach((el)=>{
          el.isHasTray = el.isHasTray == 1 ? true : false;
      })
    },

    //关闭修改提货信息
    handleClose2(){
      this.dialogVisible2 = false;
    },

    //提交修改提货信息
    handleConfirm2(){
      this.btnLoading2 = true;
      this.$refs['takeForm'].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.takeForm))
          data.takeGoodsList.forEach((el)=>{
            el.isHasTray = el.isHasTray ? 1 : 0;
          })
          changeTakeInfo(data).then(()=>{
            this.btnLoading2 = false;
            this.handleClose2();
            this.getOrderInfo();
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })

    },
    //显示打印弹窗
    showPrint(){
      this.dialogVisible = true;
      if(this.form.takeOrderInfo.tOrderId){
        getPrintContentakeOrder({tOrderId:this.form.takeOrderInfo.tOrderId}).then((res)=>{
          this.formPrint = res;
        })
      }
    },
    //关闭打印弹窗
    closePrint(){
      this.dialogVisible = false;
    },

    //打印
    printdiv(){
      $("#print-div").print({
        globalStyles:true,//是否包含父文档的样式，默认为true
        mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
        stylesheet:null,//外部样式表的URL地址，默认为null
        noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
        iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
        append:null,//将内容添加到打印内容的后面
        prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
        deferred: $.Deferred()//回调函数
      });
    },

    //去订单详情页
    toDetail(){
      let routeData = this.$router.resolve({name:'purchaseDetail',query:{id:this.form2.saleOrderId,type:'see'}});
      window.open(routeData.href);
    },

    //获取排货详情
    getOrderInfo(){
      planGoodsInfo({dpgId:this.$route.query.dpgId}).then((res)=>{
        this.form = res;
        // this.showPrint();
      }).catch((err)=>{
      })
    },
  }
}
</script>

<style  lang="scss" scoped>
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
}
.detail-form{
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom:0px;
  }
}

.detail-container {
  width: 90%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
  .el-card__header{
    background: #f8f8f8;
    .kehu-name{
      display: inline-block;
      font-size:14px;
      vertical-align: middle;
    }
    .kehu-label{
      font-size:12px;
      vertical-align: middle;
      display: inline-block;
      margin-left:15px;
      color: #409eff;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      height:24px;
      line-height: 24px;
      padding:0 10px;
      border-radius: 5px;
    }
    .kehu-info{
      text-align: right;
      font-size: 12px;
      color:#333;
      line-height: 20px;
      span{
        padding-left:16px;
      }
    }
  }
  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }
}
.price-block{
  font-size:12px;
  line-height:30px;
  .lab{
    display: inline-block;
    width:100px;
    text-align: right;
  }
  .text{
    display: inline-block;
  }
}
#print-div{
  font-size:14px;
  font-family: "Microsoft YaHei";
  color:#000;
  .title{
    font-size:28px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
  }
  .paper-top{
    margin-top:20px;
    line-height: 20px;
  }
  .good-table{
    margin-top:0px;
    table{
      border-left:1px solid #aaa;
      border-bottom:1px solid #aaa;
      td,th{
        font-weight: normal;
        border-right:1px solid #aaa;
        border-top:1px solid #aaa;
        padding:5px 10px;
        line-height: 20px;
      }
    }
  }
  .paper-bottom{
    margin-top:0px;
    line-height: 20px;
  }
  .tihuotable{
    border-left:1px solid #aaa;border-bottom:1px solid #aaa;
    td{
      height: 40px;
    }
    .td-div{
      line-height: 18px;
    }
    .th{
      border-top:1px solid #aaa;background: #f2f2f2;white-space:nowrap;width:160px;
    }
  }
}
</style>
